<template>  
    <div>  
      <h2>商品列表</h2>  
      <div v-for="product in products" :key="product.id" class="product">  
        <h3>{{ product.name }}</h3>  
        <p>{{ product.price.toFixed(2) }}元</p>  
        <button @click="addToCart(product)">添加到购物车</button>  
      </div>  
    </div>  
  </template>  
    
  <script>  
  export default {  
    data() {  
      return {  
        products: [  
          { id: 1, name: '可乐', price: 10.99 },  
          { id: 2, name: '鞋子', price: 20.99 },  
          // ... 更多商品  
        ],  
      };  
    },  
    methods: {  
      addToCart(product) {  
        this.$store.commit('addToCart', product);  
      },  
    },  
  };  
  </script>  
    
  <style scoped>  
  /* 样式 */  
  .product {  
    margin-bottom: 20px;  
  }  
  </style>